<template>
  <div class="img-click">
      <h3>图片点击验证</h3>
      <div class="img-refresh">
          <img :src="refreshImg" alt="" @click="refresh">
          <span class="btn-info">点击刷新<b></b></span>
      </div>
      <div class="img-close">
          <img :src="closeImg" alt="" @click="close">
          <span class="btn-info">点击关闭<b></b></span>
      </div>
      <div class="imgbox">
          <img class="img" :src="imgClickSrc" alt="验证图片" @click="imgClick">
      </div>
      <p class="error" v-if="!validationState">点击错误</p>
  </div>
</template>

<script>
import refreshImg from '../assets/refresh.svg'
import closeImg from '../assets/close.svg'

export default {
  data() {
    return {
        imgClickSrc:'',
        refreshImg:refreshImg,
        closeImg:closeImg,
        validationState: true
    };
  },
  created(){
      //请求验证图片
      this.refresh();
  },
  methods:{
      imgClick(event){
          
          let data = event.offsetX + '_' + event.offsetY;
          
          this.$ajax(
              'check_virtual',
              {
                    appid:this.$store.state.appid,
                    operation:this.$store.state.operation,
                    type:this.$store.state.type,
                    identifying:this.$store.state.identifying,
                    value:data,
              },
              (res)=>{
                  if(res.data.data){
                      //向父级发送验证值
                      let save_value = data;
                      this.$emit('validation-finish',save_value);
                  }else{
                      this.validationState = false;
                      setTimeout(()=>{
                          this.refresh()
                      },300)
                  }
              },
              (error)=>{}
          )
      },
      //刷新
      refresh(){
          this.validationState = true;
          this.$ajax(
            'getimg_click',
            {appid:this.$store.state.appid,operation:this.$store.state.operation,identifying:this.$store.state.identifying},
            (res)=>{
                this.imgClickSrc = 'data:image/png;base64,' + res.data.data
            },
            (erro)=>{}
        )
      },
      close(){
          let closeState = true;
          this.$emit('close-state',closeState);
          window.parent.postMessage({
            'event':'validationCancel',
            'data':{
                operation:this.$store.state.operation
            }
          },'*')  
      }
  }
};
</script>

<style scoped>
.img-click{
    width: 100%;
    padding: 1px 0 30px 0;
    background:rgba(88, 79, 96, 0.498039215686275);
    position: relative;
}
.img-click h3{
    color:#fff;
    margin: 15px auto;
    font-weight: normal;
}
.img-click .img{
    width:100px;
    height: 100px;
}
.img-refresh{
    position: absolute;
    top: 25px;
    right: 45px;
}
.img-refresh img{
    width: 20px;
    height: auto;
}
.img-close{
    position: absolute;
    top: 25px;
    right: 15px;
}
.img-close img{
    width: 20px;
    height: auto;
}
.btn-info{
    display: inline-block;
    color: #fff;
    font-size: .5rem;
    position: absolute;
    top: -25px;
    right: 5px;
    background: rgba(0,0,0,0.5);
    white-space: nowrap;
    padding: 3px;
    opacity: 0;
}
.btn-info b{
    border-width: 3px;
    border-color: rgba(0,0,0,0.5) transparent transparent transparent;
    border-style: solid;
    position: absolute;
    right: 5px; 
    top:100%;
}
.img-refresh:hover .btn-info,.img-close:hover .btn-info{
    opacity: 1;
}
.error{
    width: 100%;
    color: red;
    position: absolute;
    bottom: 7px;
    display: block;
    margin: 0
}
.imgbox{
    min-height: 100px;
}
</style>
